<template>
  <codemirror
      style="border: 30px none"
      v-model="value"
      placeholder="Sql写在这里......"
      :autofocus="true"
      :extensions="codeConfig.extensions"
  />
</template>

<script setup>
import {Codemirror} from 'vue-codemirror'
import {sql} from '@codemirror/lang-sql'
import {oneDark} from '@codemirror/theme-one-dark'
import {ref, computed} from 'vue'

const props = defineProps({
  modelValue:{
    default: ''
  }
})
const emits = defineEmits(['update:modelValue'])
const value = computed({
  get(){
    return props.modelValue
  },
  set(val){
    emits('update:modelValue', val)
  }
})
// SQL编辑器配置
const codeConfig = {
  lang: 'sql',
  langValue: 'sql',
  extensions: [sql(), oneDark]
}
</script>

<style scoped>

</style>